<template>
<view class="uni-padding-wrap uni-common-pb">
    <form @submit="formSubmit" @reset="formReset">
        <view class="uni-header-logo">
            <image src="../../../static/logo.png"></image>
        </view>
        <view class="uni-hello-text uni-common-pb">
            《中凯准到》是一款集活动通知、活动报名、电子签到、现场互动、数据统计等功能于一体的一站式活动管理云平台。
        </view>
        <view>
            <view class="uni-form-item uni-column">
                <input class="uni-input" name="name" placeholder="请输入您的姓名" @input="onUserInfoNameChange" />
            </view>
            <button class="btn-submit" formType="submit" open-type="getUserInfo" @getuserinfo="mpGetUserInfo" type="primary">Submit</button>
            <button type="primary" open-type="getUserInfo" @getuserinfo="mpGetUserInfo">获取用户信息</button>
            <!-- <button type="primary" @click="login">注册</button> -->
            <!-- <button @click="login">1login11</button>
            <button @click="test">test</button> -->
            <!-- <button @click="test">test2121</button> -->
        </view>
    </form>
</view>    
</template>
<script>
import {get,loginByWeixin} from '@/utils/index';
import {getOpenId} from '@/utils/api';
//来自 graceUI 的表单验证， 使用说明见手册 http://grace.hcoder.net/doc/info/73-3.html
var  graceChecker = require("../../common/graceChecker.js");
export default {
    data () {
        return {
            userData:{}
        }
    },
    mounted(){
        // this.test()
    },
    methods:{
        test(){
            uni.showToast({ title: 'test', icon: "none" })
        },
        mpGetUserInfo(result){
				if (result.detail.errMsg !== 'getUserInfo:ok') {
					uni.showModal({
						title: '获取用户信息失败',
						content: '错误原因' + result.detail.errMsg,
						showCancel: false
					});
					return;
				}
            this.hasUserInfo = true
            this.userData = Object.assign(this.userData,result.detail.userInfo)
            console.log('userData', this.userData)
            this.login()
        },
        onUserInfoNameChange (e) {this.userData.name = e.mp.detail.value},
        formSubmit: function (e) {
            // uni.showToast({ title: 'sdfsdfdsf', icon: "none" })
            //将下列代码加入到对应的检查位置
            //定义表单规则
            var rule = [
                {name:"name", checkType : "string", checkRule:"1,3",  errorMsg:"姓名应为1-3个字符"}
            ];
            //进行表单检查
            var formData = e.detail.value
            var checkRes = graceChecker.check(formData, rule)
            if(checkRes){
                // this.login()
                // uni.showToast({title:"验证通过!", icon:"none"})
            }else{
                uni.showToast({ title: graceChecker.error, icon: "none" })
            }
        },
        login(){
            loginByWeixin(this.userData).then(res=>{
                console.log(99,res)
                uni.setStorageSync('userInfo',res.data)
                uni.showModal({
                    title: '提示',
                    content: res.msg,
                    showCancel:false,
                    success: function (res) {
                        if (res.confirm) {
                            uni.switchTab({
                                url: '/pages/tabBar/home/home'
                            });
                        } else if (res.cancel) {
                            console.log('用户点击取消');
                        }
                    }
                });
            })
        }
    }
}
</script>

<style>
body{
    background: #f4f5f6;
    padding:10px;
}
</style>
